<script setup lang="ts">
import SliderCaptcha, { CaptchaVerifyPassingData } from '@/components/Captcha';
import avatar from '@/assets/images/error/404.svg';

function handleSuccess(data: CaptchaVerifyPassingData) {
  const { time } = data;
  ElMessage.success(`校验成功,耗时${time}秒`);
}
function handleBtnClick() {
  (elRef.value as InstanceType<typeof SliderCaptcha>)?.resume();
}
const elRef = useTemplateRef('el1');
</script>

<template>
  <PageCard title="Captcha验证">
    <div class="flex">
      <div class="flex flex-x-center w-30%">
        <SliderCaptcha ref="el1" success-text="校验成功" text="拖动以进行校验" @success="handleSuccess" />
        <el-button class="ml-2" type="primary" @click="handleBtnClick">还原</el-button>
      </div>
      <div class="flex flex-items-end flex-justify-center ml-10%">
        <SliderRotateCaptcha :src="avatar" @success="handleSuccess" />
      </div>
    </div>
  </PageCard>
</template>

<style lang="scss" scoped></style>
